<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/common.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:t="http://myfaces.apache.org/tomahawk">

    <ui:define name="title">
        Student create
    </ui:define>

    <ui:define name="head">
        <script src="../../res/js/jquery-1.10.2.min.js"></script>
        <script src="../../res/js/jquery-ui-1.10.0.custom.js"></script>
        <link rel="stylesheet" href="../../res/css/jquery-ui.css" />

        <script type="text/javascript">
            $(function() {
                $(".c1").datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
        script>
            $(function() {
                $(document).tooltip();
            });
        </script>
        <style>
            label {
                display: inline-block;
                width: 100px;
            }
        </style>
          <link rel="stylesheet" href="../../res/css/admin-style.css"/>
    </ui:define>

    <ui:define name="pageheader">
        Staff create
    </ui:define>

    <ui:define name="content">
        <h:form id="f1"  >
            <table id="content-table" width="100%" cellspacing="0" cellpadding="0" border="0">
                <div id="content-table-inner">

                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                        <tbody><tr valign="top">
                                <td>
                                    
                                    <!--  end step-holder -->

                                    <!-- start id-form -->
                                    <table cellspacing="0" cellpadding="0" border="0" id="id-form">
                                        <tbody><tr>
                                                <th valign="top">User name:</th>
                                                <td>
                                                    <h:inputText value="#{staffManager.username }" styleClass="inp-form pl" alt="&lt;Staff name here&gt;" />
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <th valign="top">Email:</th>
                                                <td>
                                                    <h:inputText id="dpStart" value="#{staffManager.email}" styleClass="inp-form dpEnd" alt="&lt;Staff's email here&gt;"/>
                                                </td>
                                                <td>
                                                    <div class="error-left"></div>
                                                    <div class="error-inner">This field is required.</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th valign="top">Full name:</th>
                                                <td>
                                                    <h:inputText id="dpEnd" value="#{staffManager.fullname}" styleClass="inp-form dpEnd" alt="&lt;Staff's fullname here&gt;"/>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <th valign="top">Address:</th>
                                                <td>	
                                                    <h:inputText  value="#{staffManager.address}" styleClass="inp-form" alt="&lt;Staff's address here&gt;"/>
                                                </td>
                                                <td></td>
                                            </tr> 
                                            <tr>
                                                <th valign="top">Birthday:</th>
                                                <td>
                                                    <h:inputText value="#{staffManager.birthday}" styleClass="inp-form c1" alt="&lt;Staff's birthday here&gt;">
                                                        <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
                                                    </h:inputText>
                                                </td>
                                                <td></td>
                                            </tr>
                                            
                                            <tr>
                                                <th valign="top">Gender:</th>
                                                <td>
                                                    <h:selectOneMenu value="#{staffManager.gender}" label="#{genders.getDisplay(studentManager.gender)}">
                                                        <f:selectItems value="#{genders.all}" var="g" itemValue="#{g.value}" itemLabel="#{g.dispayString}" />
                                                    </h:selectOneMenu>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <th valign="top">Phone:</th>
                                                <td>
                                                    <h:inputText value="#{staffManager.phone}" styleClass="inp-form" alt="&lt;Staff's phone here&gt;">
                                                    </h:inputText>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <td valign="top">
                                                    <h:commandButton action="#{staffManager.docreate}" styleClass="buttons" value="Create"  />
                                                    <input type="reset" class="buttons" value="Reset" />
                                                </td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- end id-form  -->

                                </td>
                                <td>

                                    <!--  start related-activities -->
                                    
                                    <!-- end related-activities -->

                                </td>
                            </tr>
                            <tr>
                                <td>

                                </td>
                                <td></td>
                            </tr>
                        </tbody></table>

                    <div class="clear"></div>


                </div> 

            </table>
        </h:form>
    </ui:define>

</ui:composition>
